<template>
  <div class="apple-play" @click="isshow">
    <audio
      ref="audio"
      style="display: none"
      :src="`https://music.163.com/song/media/outer/url?id=${message.id}.mp3`"
      controls
      autoplay
      @timeupdate="timeupdate"
      @canplay="canplay"
      @pause="pause"
      @play="play"
    ></audio>
    <div class="left">
      <div
        class="pic"
        :class="{ active: !status }"
        :style="{
          background: `url(${message.picUrl}) no-repeat center/contain`,
        }"
      ></div>
      <div class="text">{{ message.name }}</div>
    </div>
    <div class="right" @click.stop="toggle">
      <i
        class="icon"
        :class="[status ? 'fa fa-pause' : 'fa fa-play']"
        aria-hidden="true"
      ></i>
    </div>

    <!-- 遮罩层 -->
    <div class="media" v-if="show">
      <appleMedia
        :obj="message"
        :currentTime="currentTime"
        :duration="duration"
        :show="show"
        @checkTime="checkTime"
        @toggleStatus="toggleStatus"
        @noshow="noshow"
      ></appleMedia>
    </div>
  </div>
</template>
<script>
import appleMedia from "./appleMedia.vue";
export default {
  components: {
    appleMedia,
  },
  props: {
    message: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      status: true, //播放状态
      currentTime: 0, //当前播放时间
      duration: 0, //总时长
      show: false,
    };
  },
  computed: {},
  methods: {
    noshow() {
      this.show = false;
    },
    // 子组件自定义事件
    checkTime(data) {
      this.$refs.audio.currentTime = data;
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
      }
    },
    toggleStatus(res) {
      if (res) {
        this.play();
        this.status = true;
      } else {
        this.pause();
        this.status = false;
      }
    },
    // 点击按钮
    toggle() {
      if (this.$refs.audio.paused) {
        this.play();
        this.status = true;
      } else {
        this.pause();
        this.status = false;
        this.$emit("noshow");
      }
    },
    timeupdate() {
      if (this.$refs.audio) {
        this.currentTime = this.$refs.audio.currentTime;
      }
    },
    canplay() {
      if (this.$refs.audio) {
        this.duration = this.$refs.audio.duration;
      }
    },
    play() {
      if (this.$refs.audio.play) {
        this.$refs.audio.play();
      }
    },
    pause() {
      if (this.$refs.audio) {
        this.$refs.audio.pause();
      }
    },
    isshow() {
      this.show = true;
    },
  },
  watch: {
    message: {
      handler() {
        this.status = true;
      },
    },
  },
};
</script>

<style lang="less" scoped>
.apple-play {
  z-index: 99;
  padding: 0 15px;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 60px;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;
  .left {
    color: white;
    width: 80%;
    overflow: hidden;
    display: flex;
    align-items: center;
    .pic {
      margin-right: 10px;
      width: 36px;
      height: 36px;
      border: 10px solid black;
      border-radius: 100%;
      animation: zhuan 5s linear infinite;
    }
    .active {
      animation-play-state: paused;
    }
    .text {
      flex: 1;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .right {
    position: absolute;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 2px solid white;
    margin-left: 20px;
    text-align: center;
    border-radius: 100%;
    line-height: 30px;
    .icon {
      font-size: 14px;
      color: white;
    }
  }
}

@keyframes zhuan {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>